<template>
	<page-layout class="page">
		<view
			class="group"
			v-for="group in groups"
			:key="group.title"
		>
			<view class="title">
				{{ group.title }}
				<text class="count">({{ group.children.length }})</text>
			</view>
			<pure-grid cols="2">
				<pure-cell
					v-for="comp in group.children"
					:key="comp.value"
					@onClick="handleMenuClick(comp)"
					:iconName="comp.icon"
					:title="comp.label"
					:tips="comp.value"
				/>
			</pure-grid>
		</view>

		<view class="pj-padding-sides">
			<pure-flex direction="column">
				<pure-cell
					v-for="comp in components"
					:key="comp.value"
					@onClick="handleMenuClick(comp)"
					:iconName="comp.icon"
					:title="comp.label"
					:tips="comp.value"
				/>
			</pure-flex>
		</view>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
	import { useTabbarStore } from "@/stores";

	const groups = ref([
		{
			title: "基础组件",
			children: [
				{
					label: "图标",
					value: "Icon",
					icon: "/static/images/i_001.png",
					url: "/pages/components/icon/index"
				},
				{
					label: "单元格",
					value: "Cell",
					icon: "/static/images/i_003.png",
					url: "/pages/components/cell/index"
				},
				{
					label: "图片",
					value: "Image",
					icon: "/static/images/i_014.png",
					url: "/pages/components/image/index"
				},
				{
					label: "链接",
					value: "Link",
					icon: "/static/images/i_020.png",
					url: "/pages/components/link/index"
				},
				{
					label: "主题",
					value: "Theme",
					icon: "/static/images/i_052.png",
					url: "/pages/components/theme/index"
				}
			]
		},
		{
			title: "布局组件",
			children: [
				{
					label: "布局",
					value: "Layout",
					icon: "/static/images/i_005.png",
					url: "/pages/components/layout/index"
				},
				{
					label: "布局",
					value: "Flex",
					icon: "/static/images/i_006.png",
					url: "/pages/components/flex/index"
				},
				{
					label: "块元素",
					value: "Block",
					icon: "/static/images/i_004.png",
					url: "/pages/components/block/index"
				},
				{
					label: "宫格",
					value: "Grid",
					icon: "/static/images/i_008.png",
					url: "/pages/components/grid/index"
				},
				{
					label: "间隔",
					value: "Gap",
					icon: "/static/images/i_007.png",
					url: "/pages/components/gap/index"
				},
				{
					label: "线",
					value: "Line",
					icon: "/static/images/i_019.png",
					url: "/pages/components/line/index"
				},
				{
					label: "上传宫格",
					value: "UploadGrid",
					icon: "/static/images/i_038.png",
					url: "/pages/components/upload-grid/index"
				},
				{
					label: "上传列表",
					value: "UploadList",
					icon: "/static/images/i_038.png",
					url: "/pages/components/upload-list/index"
				}
			]
		},
		{
			title: "表单组件",
			children: [
				{
					label: "表单",
					value: "Form",
					icon: "/static/images/i_010.png",
					url: "/pages/components/form/index"
				},
				{
					label: "按钮",
					value: "Button",
					icon: "/static/images/i_002.png",
					url: "/pages/components/button/index"
				},
				{
					label: "多选",
					value: "Checkbox",
					icon: "/static/images/i_011.png",
					url: "/pages/components/checkbox/index"
				},
				{
					label: "单选",
					value: "Radio",
					icon: "/static/images/i_031.png",
					url: "/pages/components/radio/index"
				},
				{
					label: "开关选择器",
					value: "Switch",
					icon: "/static/images/i_033.png",
					url: "/pages/components/switch/index"
				},
				{
					label: "输入框",
					value: "Input",
					icon: "/static/images/i_012.png",
					url: "/pages/components/input/index"
				},
				{
					label: "多行输入框",
					value: "Textarea",
					icon: "/static/images/i_037.png",
					url: "/pages/components/textarea/index"
				},
				{
					label: "步进器",
					value: "Stepper",
					icon: "/static/images/i_032.png",
					url: "/pages/components/stepper/index"
				},
				{
					label: "列选择器",
					value: "Picker",
					icon: "/static/images/i_042.png",
					url: "/pages/components/picker/index"
				},
				{
					label: "日期选择器",
					value: "DatePicker",
					icon: "/static/images/i_044.png",
					url: "/pages/components/date-picker/index"
				},
				{
					label: "时间选择器",
					value: "TimePicker",
					icon: "/static/images/i_045.png",
					url: "/pages/components/time-picker/index"
				},
				{
					label: "月份弹窗选择器",
					value: "MonthModal",
					icon: "/static/images/i_030.png",
					url: "/pages/components/month-modal/index"
				},
				{
					label: "验证码倒计时",
					value: "CodeCountdown",
					icon: "/static/images/i_030.png",
					url: "/pages/components/code-countdown/index"
				},
				{
					label: "验证码输入框",
					value: "CodeInput",
					icon: "/static/images/i_031.png",
					url: "/pages/components/code-input/index"
				},
				{
					label: "日历",
					value: "Calendar",
					icon: "/static/images/i_043.png",
					url: "/pages/components/calendar/index"
				},
				{
					label: "级联选择器",
					value: "Cascader",
					icon: "/static/images/i_042.png",
					url: "/pages/components/cascader/index"
				},
				{
					label: "评分",
					value: "Rate",
					icon: "/static/images/i_047.png",
					url: "/pages/components/rate/index"
				}
			]
		},
		{
			title: "展示组件",
			children: [
				{
					label: "徽标",
					value: "Badge",
					icon: "/static/images/i_009.png",
					url: "/pages/components/badge/index"
				},
				{
					label: "标签",
					value: "Tag",
					icon: "/static/images/i_036.png",
					url: "/pages/components/tag/index"
				},
				{
					label: "金额",
					value: "Amount",
					icon: "/static/images/i_016.png",
					url: "/pages/components/amount/index"
				},
				{
					label: "头像",
					value: "Avatar",
					icon: "/static/images/i_017.png",
					url: "/pages/components/avatar/index"
				},
				{
					label: "列表",
					value: "List",
					icon: "/static/images/i_021.png",
					url: "/pages/components/list/index"
				},
				{
					label: "进度条",
					value: "Progress",
					icon: "/static/images/i_051.png",
					url: "/pages/components/progress/index"
				},
				{
					label: "环形进度条",
					value: "CircleProgress",
					icon: "/static/images/i_046.png",
					url: "/pages/components/circle-progress/index"
				},
				{
					label: "瀑布流",
					value: "Waterfall",
					icon: "/static/images/i_039.png",
					url: "/pages/components/waterfall/index"
				},
				{
					label: "轮播",
					value: "Swiper",
					icon: "/static/images/i_028.png",
					url: "/pages/components/swiper/index"
				},
				{
					label: "滚动通知",
					value: "NoticeBar",
					icon: "/static/images/i_040.png",
					url: "/pages/components/notice-bar/index"
				}
			]
		},
		{
			title: "层级组件",
			children: [
				{
					label: "浮动气泡",
					value: "FloatBubble",
					icon: "/static/images/i_041.png",
					url: "/pages/components/float-bubble/index"
				},
				{
					label: "遮罩层",
					value: "Overlay",
					icon: "/static/images/i_025.png",
					url: "/pages/components/overlay/index"
				},
				{
					label: "对话框",
					value: "Dialog",
					icon: "/static/images/i_026.png",
					url: "/pages/components/dialog/index"
				},
				{
					label: "弹出层",
					value: "Popup",
					icon: "/static/images/i_027.png",
					url: "/pages/components/popup/index"
				},
				{
					label: "通知",
					value: "Notify",
					icon: "/static/images/i_038.png",
					url: "/pages/components/notify/index"
				}
			]
		},
		{
			title: "导航组件",
			children: [
				{
					label: "选项卡",
					value: "Tabs",
					icon: "/static/images/i_035.png",
					url: "/pages/components/tabs/index"
				},
				{
					label: "指示器",
					value: "Indicator",
					icon: "/static/images/i_015.png",
					url: "/pages/components/indicator/index"
				},
				{
					label: "切换器",
					value: "Progresor",
					icon: "/static/images/i_029.png",
					url: "/pages/components/progresor/index"
				},
				{
					label: "标签栏",
					value: "Tabbar",
					icon: "/static/images/i_034.png",
					url: "/pages/components/tabbar/index"
				},
				{
					label: "导航栏",
					value: "NavBar",
					icon: "/static/images/i_048.png",
					url: "/pages/components/nav-bar/index"
				}
			]
		},
		{
			title: "状态组件",
			children: [
				{
					label: "加载",
					value: "Loading",
					icon: "/static/images/i_022.png",
					url: "/pages/components/loading/index"
				},
				{
					label: "加载更多",
					value: "Loadmore",
					icon: "/static/images/i_023.png",
					url: "/pages/components/loadmore/index"
				},
				{
					label: "加载弹窗",
					value: "LoadingModal",
					icon: "/static/images/i_024.png",
					url: "/pages/components/loading-modal/index"
				},
				{
					label: "空状态",
					value: "Empty",
					icon: "/static/images/i_013.png",
					url: "/pages/components/empty/index"
				}
			]
		},
		{
			title: "其他",
			children: [
				{
					label: "搜索",
					value: "Search",
					icon: "/static/images/i_050.png",
					url: "/pages/components/search/index"
				}
			]
		}
	]);

	// 组件
	const components = ref([]);

	const tabbarStore = useTabbarStore();

	onShow(async () => {
		// 更新 tabbar 选中项
		tabbarStore.updateValue();
	});

	// 菜单点击事件
	function handleMenuClick(comp) {
		uni.navigateTo({ url: comp.url });
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 16px;

		.group {
			margin-bottom: 20px;

			.title {
				font-weight: 600;
				margin-bottom: 12px;
			}

			.count {
				font-size: var(--pure-font-size-small);
				color: var(--pure-text-color-regular);
			}
		}
	}
</style>
